<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
            DOM节点一共分为三大类：元素节点、文本节点、属性节点
                - 什么是分类？比如我们在获取元素的时候，通过各种方式获取到的我们叫做节点(标签节点)
                - 比如我们写在标签里的文字，就是文本节点
                - 写在每一个标签上的属性，就叫做属性节点

                说的更直白一点：
                    - 通过getElementBy...的方式拿到的就是元素节点
                    - 通过getAttribute得到的就是属性节点
                    - 通过innerText得到的就是元素文本节点

            - Document是页面最大的节点，但是它不是一个元素节点，只是一个承载使用的节点，我们把它叫做根节点
            - html是页面最大的元素节点，包含着页面中所有的元素节点，我们把它叫做根元素节点
            - 像head、body、div、ul、meta...这些我们统称为元素节点，他们各自的功能都不一样
            - 很多时候我们的div里会写一些文字、换行、空格什么的，这些东西我们把它叫做文本节点
            - 很多时候我们会给标签加上id、class等属性，这些我们把他叫做属性节点
            - 注释虽然不会显示在页面上，但是他们其实也是节点，我们把它们叫做注释节点

            给你举个例子：
            <div>
                123    
            </div>
            这个div元素节点里就包含了三个子文本节点，一个换行，一个123，一个换行。怎么样，是不是觉着自己的世界观崩塌了？
        */
    </script>
</body>
</html>